<template>
	<view class="chat-detail-page">
		<!-- 快捷操作栏 -->
		<view class="quick-actions">
			<view class="action-item" @click="makeCall">
				<view class="action-icon phone-icon">📞</view>
				<text class="action-text">换电话</text>
			</view>
			<view class="action-item" @click="switchToWechat">
				<view class="action-icon wechat-icon">💬</view>
				<text class="action-text">换微信</text>
			</view>
			<view class="action-item" @click="sendResume">
				<view class="action-icon resume-icon">📄</view>
				<text class="action-text">发简历</text>
			</view>
			<view class="action-item" @click="notInterested">
				<view class="action-icon close-icon">❌</view>
				<text class="action-text">不感兴趣</text>
			</view>
		</view>

		<!-- 聊天消息列表 -->
		<view class="message-list">
			
			<!-- 30天分割线 -->
			<view class="divider-section">
				<text class="divider-text">以下是30天内的聊天记录</text>
			</view>

			<!-- 聊天时间 -->
			<view class="time-divider">
				<text class="time-text">09-19 15:03</text>
			</view>
			
			<!-- 职位信息卡片 -->
			<view class="job-card">
				<view class="job-header">
					<text class="job-title">java开发工程师</text>
					<text class="job-salary">13-15K</text>
				</view>
				<view class="job-company">
					<text class="company-name">广州如是纵横科技服务</text>
				</view>
				<view class="job-details">
					<text class="detail-item">武汉 洪山区 花山</text>
					<text class="detail-item">3-5年</text>
					<text class="detail-item">本科</text>
				</view>
				<view class="job-description">
					<text class="description-header">【明源云】</text>
					<text class="description-content">需求：Java开发工程师-2名</text>
					<text class="description-content">用人周期：长期</text>
					<text class="description-content">工作地点：武汉市花山软件新城二期B3栋</text>
					<text class="description-content">任职部门：天际平台/应用开发事业部...</text>
					<text class="expand-text" @click="expandDescription">展开</text>
				</view>
				<view class="job-tags">
					<text class="tag">Java</text>
					<text class="tag">MySQL</text>
					<text class="tag">Spring</text>
				</view>
				
				<!-- HR信息栏 -->
				<view class="hr-info">
					<image class="hr-avatar" src="/static/images/default-avatar.png" mode="aspectFill"></image>
					<view class="hr-details">
						<text class="hr-name">钟忆 · 招聘专员</text>
					</view>
				</view>

				<!-- 职位收藏提示 -->
				<view class="job-favorite">
					<view class="favorite-content">
						<text class="favorite-date">9月19日15:03向你发起的沟通</text>
						<view class="favorite-action" @click="toggleFavorite">
							<text class="favorite-icon">☆</text>
							<text class="favorite-text">收藏职位</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 消息列表 -->
			<view class="messages">
				<view class="message-item" v-for="message in messages" :key="message.id"
					  :class="{'message-sent': message.isSent, 'message-received': !message.isSent, 'system-message': message.isSystemMessage}">
					
					<!-- 系统消息 -->
					<view v-if="message.isSystemMessage" class="system-message-content">
						<text class="system-message-text">{{ message.content }}</text>
					</view>
					
					<!-- 接收的消息 (HR发送) -->
					<view v-else-if="!message.isSent" class="message-received-content">
						<image class="message-avatar" :src="hrInfo.avatar" mode="aspectFill"></image>
						<view class="message-content">
							<view class="message-bubble received-bubble">
								<text class="message-text">{{ message.content }}</text>
							</view>
						</view>
					</view>

					<!-- 发送的消息 (用户发送) -->
					<view v-else class="message-sent-content">
						<view class="message-content">
							<view class="message-bubble sent-bubble">
								<text class="message-text">{{ message.content }}</text>
							</view>
						</view>
						<image class="message-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部输入栏 -->
		<view class="input-bar">
			<view class="input-container">
				<view class="input-left">
					<view class="quick-reply-btn" @click="showQuickReply">
						<text class="quick-reply-text">常</text>
					</view>
				</view>
				<view class="input-main">
					<textarea class="message-input" 
							  :value="inputMessage" 
							  @input="onInputChange"
							  placeholder="和Ta聊一聊～" 
							  :maxlength="500"
							  :auto-height="true"
							  :cursor-spacing="20"
							  @confirm="sendMessageAction"></textarea>
				</view>
				<view class="input-right">
					<view class="emoji-btn" @click="showEmoji">
						<text class="emoji-icon">😊</text>
					</view>
					<view class="add-btn" @click="showMoreActions">
						<text class="add-icon">+</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多操作菜单 -->
		<view class="more-actions-popup" v-if="showMoreActionPopup" @click="hideMoreActions">
			<view class="popup-content" @click.stop>
				<view class="action-grid">
					<view class="grid-item" @click="selectImage">
						<text class="grid-icon">📷</text>
						<text class="grid-text">相册</text>
					</view>
					<view class="grid-item" @click="takePhoto">
						<text class="grid-icon">📸</text>
						<text class="grid-text">拍照</text>
					</view>
					<view class="grid-item" @click="selectFile">
						<text class="grid-icon">📁</text>
						<text class="grid-text">文件</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ChatDetail',
	data() {
		return {
			conversationId: '',
			inputMessage: '',
			scrollTop: 0,
			showMoreActionPopup: false,
			userInfo: {
				name: '姜女士',
				company: '联合互赢',
				position: 'HRBP',
				avatar: '/static/hr-avatar.png'
			},
			hrInfo: {
				name: '姜女士',
				position: 'HRBP',
				avatar: '/static/hr-avatar.png'
			},
			jobInfo: {
				title: '中高级java工程师（自研项目）',
				salary: '13-18K',
				company: '联合互赢',
				status: '未融资',
				location: '武汉 洪山区 珞狮南路',
				experience: '3-5年',
				education: '本科',
				description: '公司自研项目，不是外包，不是外包，不是外包！！岗位职责：1、能够独立进行SaaS产品、电商业务及其中台系统的系统架构设计，技术架构选型，并主导功能模块的设计、数据结构设计、对外接口设计；',
				tags: ['Java', '不接受居家办公', 'SaaS']
			},
			messages: [
				{
					id: 1,
					content: '你好，黄河，在考虑新的工作机会吗？😊',
					isSent: false,
					timestamp: '2024-09-19 15:03',
					status: 'read'
				},
				{
					id: 2,
					content: '对方刚收藏了您',
					isSent: false,
					timestamp: '2024-09-19 15:04',
					status: 'read',
					isSystemMessage: true
				},
				{
					id: 3,
					content: '明源云现在招回流',
					isSent: false,
					timestamp: '2024-09-19 15:05',
					status: 'read'
				}
			]
		}
	},
	onLoad(options) {
		this.conversationId = options.conversationId || ''
	},
	
	// 处理导航栏右侧按钮点击事件
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			this.showMoreOptions()
		}
	},
	methods: {
		showMoreOptions() {
			uni.showActionSheet({
				itemList: ['查看简历', '举报']
			})
		},
		makeCall() {
			uni.showToast({ title: '换电话功能', icon: 'none' })
		},
		switchToWechat() {
			uni.showToast({ title: '换微信功能', icon: 'none' })
		},
		sendResume() {
			uni.navigateTo({ url: '/pages/resume/list?action=select' })
		},
		notInterested() {
			uni.showToast({ title: '已标记为不感兴趣', icon: 'success' })
		},
		expandDescription() {
			uni.showModal({ title: '职位描述', content: this.jobInfo.description, showCancel: false })
		},
		toggleFavorite() {
			uni.showToast({ title: '收藏成功', icon: 'success' })
		},
		onInputChange(e) {
			this.inputMessage = e.detail.value
		},
		sendMessageAction() {
			if (!this.inputMessage.trim()) return
			const newMessage = {
				id: Date.now(),
				content: this.inputMessage.trim(),
				isSent: true,
				timestamp: new Date().toISOString()
			}
			this.messages.push(newMessage)
			this.inputMessage = ''
		},
		showQuickReply() {
			uni.showActionSheet({
				itemList: ['你好', '谢谢', '收到'],
				success: (res) => {
					const replies = ['你好', '谢谢', '收到']
					this.inputMessage = replies[res.tapIndex]
				}
			})
		},
		showEmoji() {
			uni.showToast({ title: '表情功能', icon: 'none' })
		},
		showMoreActions() {
			this.showMoreActionPopup = true
		},
		hideMoreActions() {
			this.showMoreActionPopup = false
		},
		selectImage() {
			uni.chooseImage({ count: 1, sourceType: ['album'] })
			this.hideMoreActions()
		},
		takePhoto() {
			uni.chooseImage({ count: 1, sourceType: ['camera'] })
			this.hideMoreActions()
		},
		selectFile() {
			uni.showToast({ title: '文件选择功能', icon: 'none' })
			this.hideMoreActions()
		},
		loadMoreMessages() {
			console.log('加载更多消息')
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-detail-page {
	height: 100vh;
	background-color: #f5f6fa;
	display: flex;
	flex-direction: column;
}

/* 快捷操作栏 */
.quick-actions {
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	justify-content: space-around;
	border-bottom: 20rpx solid #f5f6fa;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.action-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}

.action-text {
	font-size: 24rpx;
	color: #666;
}

/* 30天分割线 */
.divider-section {
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
}

.divider-text {
	font-size: 24rpx;
	color: #999;
	background-color: #f5f6fa;
}

/* 时间分割线 */
.time-divider {
	padding: 20rpx 0;
	display: flex;
	justify-content: center;
}

.time-text {
	font-size: 24rpx;
	color: #999;
	background-color: #f0f0f0;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
}

/* 职位信息卡片 */
.job-card {
	background-color: #fff;
	margin: 0 20rpx 30rpx 20rpx;
	padding: 20rpx 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}

.job-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.job-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	flex: 1;
	margin-right: 20rpx;
}

.job-salary {
	font-size: 36rpx;
	font-weight: 600;
	color: #00BFFF;
}

.job-company {
	margin-bottom: 16rpx;
}

.company-name {
	font-size: 28rpx;
	color: #333;
}

.job-details {
	display: flex;
	gap: 30rpx;
	margin-bottom: 20rpx;
	background-color: #f8f9fa;
	padding: 16rpx 20rpx;
	border-radius: 8rpx;
}

.detail-item {
	font-size: 24rpx;
	color: #666;
}

.job-description {
	margin-bottom: 20rpx;
	line-height: 1.6;
}

.description-header {
	font-size: 26rpx;
	color: #333;
	font-weight: 600;
	display: block;
	margin-bottom: 8rpx;
}

.description-content {
	font-size: 26rpx;
	color: #666;
	display: block;
	line-height: 1.5;
	margin-bottom: 4rpx;
}

.expand-text {
	font-size: 26rpx;
	color: #007AFF;
	margin-left: 8rpx;
}

.job-tags {
	display: flex;
	gap: 16rpx;
	flex-wrap: wrap;
}

.tag {
	background-color: #f0f0f0;
	color: #666;
	padding: 8rpx 16rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
}

/* 消息列表 */
.message-list {
	flex: 1;
	padding: 20rpx;
	overflow-y: auto;
}

.hr-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-top: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.hr-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.hr-name {
	font-size: 26rpx;
	color: #333;
}

.job-favorite {
	margin-top: 20rpx;
	padding: 16rpx 20rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
}

.favorite-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.favorite-date {
	font-size: 24rpx;
	color: #999;
}

.favorite-action {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.favorite-icon {
	font-size: 28rpx;
	color: #FFD700;
}

.favorite-text {
	font-size: 24rpx;
	color: #666;
}

/* 消息气泡 */
.message-item {
	margin-bottom: 30rpx;
}

/* 系统消息 */
.system-message-content {
	display: flex;
	justify-content: center;
	margin: 20rpx 0;
}

.system-message-text {
	font-size: 24rpx;
	color: #999;
	background-color: rgba(0,0,0,0.05);
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
}

.message-received-content {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.message-sent-content {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	justify-content: flex-end;
}

.message-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	flex-shrink: 0;
}

.message-content {
	flex: 1;
	max-width: 480rpx;
}

.message-bubble {
	padding: 20rpx 24rpx;
	border-radius: 18rpx;
	word-wrap: break-word;
}

.received-bubble {
	background-color: #fff;
	border: 1rpx solid #eee;
	border-top-left-radius: 4rpx;
}

.sent-bubble {
	background-color: #007AFF;
	border-top-right-radius: 4rpx;
}

.message-text {
	font-size: 28rpx;
	line-height: 1.4;
}

.received-bubble .message-text {
	color: #333;
}

.sent-bubble .message-text {
	color: #fff;
}

/* 输入栏 */
.input-bar {
	background-color: #fff;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #eee;
}

.input-container {
	display: flex;
	align-items: flex-end;
	gap: 20rpx;
}

.input-left {
	flex-shrink: 0;
}

.quick-reply-btn {
	width: 60rpx;
	height: 60rpx;
	background-color: #00BFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-reply-text {
	color: #fff;
	font-size: 24rpx;
	font-weight: 600;
}

.input-main {
	flex: 1;
	background-color: #f8f9fa;
	border-radius: 20rpx;
	padding: 16rpx 20rpx;
	max-height: 200rpx;
}

.message-input {
	width: 100%;
	min-height: 40rpx;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
	resize: none;
}

.input-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.emoji-btn, .add-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0;
}

.emoji-icon, .add-icon {
	font-size: 24rpx;
	color: #666;
}

/* 更多操作弹窗 */
.more-actions-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}

.popup-content {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx;
	width: 100%;
}

.action-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40rpx;
	justify-items: center;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16rpx;
}

.grid-icon {
	font-size: 48rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid-text {
	font-size: 24rpx;
	color: #666;
}
</style>